<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /* 后代选择器：任意选择器组合 */
        ul li {
            color: red;
        }
        /* 区分两个ol */
        .o1 {
        }
        .o1 li {
            color: blue;
        }
        .o2 {
        }
        .o2 li {
            color: green;
        }
        /* 后代选择器 */
        .o3 > li {
            background-color: pink;
        }
    </style>
</head>
<body>

    <ul>
        <li>苹果</li>
        <li>梨</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ul>
    <ol class="o1">
        <li>印度</li>
        <li>巴西</li>
        <li>尼日利亚</li>
    </ol>
    <ol class="o2">
        <li>中国</li>
        <li>美国</li>
        <li>俄罗斯</li>
    </ol>

    <ol class="o3">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <ol>
            <li>列表4</li>
            <li>列表5</li>
            <li>列表6</li>
        </ol>
    </ol>
</body>
</html>